@charset "utf-8";
* {	box-sizing: border-box;	}


/*--------------------------*/
/*----- INITIALISATION -----*/
/*--------------------------*/

body, div, ul, p, .mobile, .global, main, .entete, .logo, #menu, h1, h2, h3 {
			margin: 0; padding: 0;	/* 	Mise a 0 - margin: marge exterieur; - padding: marge intérieure */
} 
.mobile	{	display: none;	}



/* Page centrée, fond bleu clair, image au-dessus */
.global {	margin: 0 auto; 
			border: solid 1px lavender; border-top: none;
			max-width: 1500px;
}



/*--------------------------*/
/*--- CONTENU DE LA PAGE ---*/
/*--------------------------*/

body	{
	background-image: url(../images/fond.png);
	background-repeat: repeat;
} 

main	{
			display: block;		
			max-width: 1200px;
			margin: 0 auto;
}

main img 	{ 

	height: auto;
	margin: 0 auto;
}

/*--------------------------*/
/*--------- ENTETE ---------*/
/*--------------------------*/

.entete  {
	background-color: black;
  padding: 20px 50px;
}

.logo img {
  width: 171px;
  height: 100px;
}

/*--------------------------*/
/*---------- MENU ----------*/
/*--------------------------*/

#menu 	{	
	display: flex;
	width: 100%;
	justify-content: center;		
	background: linear-gradient(hwb(204 6% 27%), rgb(131, 193, 204));
	list-style-type: none;
	white-space: nowrap;
}

#menu li a, #menu li a:visited	{
			/* display: block : élément en forme de blocs. 
			Se placent les uns en dessous des autres et peuvent etre redimentionnés */
			display: block; text-align: center;
			padding: 15px 30px; border-right: solid lightgray 1px;
			font-family: Bogart, sans-serif;
			font-size: 0.9rem; font-weight: bold;
			/*color:hwb(204 6% 27%) text-shadow:whitesmoke 2px 0 0;	*/color: white;
			text-decoration: none;
}


#menu li a:hover {	
			background: linear-gradient(silver, dimgray);
			color: white; text-shadow: none;	
			border-bottom: 3px solid hwb(204 6% 27%);
			border-radius: 10px;
}

#menu a.active {
			border-bottom: 3px solid hwb(204 6% 27%);
}

/*--------------------------*/
/*-------- ACCUEIL ---------*/
/*--------------------------*/

.slide {
    height: 82vh;
}

.slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro p {
	padding-top: 20px;
	font-weight: bold;
	text-align: center;
	font-family: "La Belle Aurore", sans-serif;
	font-size: 4rem; 
	color: hwb(204 6% 27%);
	text-shadow: 2px 2px black;
}

.accueil {
	padding: 20px;
}

.accueil h1 {
	padding-left: 50px;
	font-family: "Sofia", sans-serif;
	color: hwb(204 6% 27%);
	font-size: 2rem; 
}

.accueil h2 {
	padding-left: 50px;
	font-family: "Sofia", sans-serif;
	color: rgb(10, 136, 87);
	font-size: 2rem;
}

.accueil h3, .accueil a, .accueil a:visited {
	font-family: "Sofia", sans-serif;
	color: rgb(50, 48, 48);
	font-size: 1.5rem;
}

.accueil a, .accueil a:visited {
	text-decoration: underline;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	font-weight: normal;
}

.accueil p {
	font-size: 1rem;
}

/*--------------------------*/
/*--------- AGENDA ---------*/
/*--------------------------*/

.dispo {
    margin: 10vh 20vh 30vh 20vh;
}

.agenda {
    border: solid 10px rgb(28, 145, 203);
    border-radius: 20px;
    box-shadow: 20px 20px 20px rgb(5, 58, 115);
    display: flex;
    align-items: center;
}

.google {
   flex: 1 1 auto;
   height: 50vh;
   padding: 0;
   margin: 0;
}

/*--------------------------*/
/*--------- TARIFS ---------*/
/*--------------------------*/

#deux_images_tarifs {
	display: flex;
	width: 100%; /* Largeur du cadre */
	overflow: hidden;

	height: 90vh;
  }
  
  .element_tarifs {
	width: 50%; /* Largeur du cadre */
	height: 100%;
	background-size: cover;
	background-position: center;
  }
  
  .element_tarifs:nth-child(1) {
	background-image: url(../images/img75.jpg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
  
  .element_tarifs:nth-child(2) {
	background-image: url(../images/img74.jpg);
  }
  
  .element_tarifs p {
	font-size: 4rem;
	text-align: center;
	color: white;
	font-family: "La Belle Aurore", sans-serif;

  }
  
  table {
	  border-collapse: collapse;/* un seul trait */
	  border: solid 10px black;
	  border-radius: 20px;
	  box-shadow: 20px 20px 20px turquoise;
	  margin: 0;
  }
  
  th {
	border: 2px solid black;
	padding: 0.5vh 1vh;
	text-align: center;
	color: white;
	background-color: rgb(18, 104, 86);
	font-size: 1.1rem;
  }
  
  td {
	  border: 1px solid black;
	  text-align: center;
	  background-color: turquoise;
	  font-size: 1.1rem;
	  font-weight: bold;
}

/*--------------------------*/
/*--------- GALERIE --------*/
/*--------------------------*/

.galeries {
	margin: 0 50px;
}

.galeries h2 {
	padding: 40px 0 10px 0;
	text-align: center;
	font-size: 2rem;
	font-family: "Sofia", sans-serif;
	color: hwb(204 6% 27%);
}

.galeries a {
	text-align: center;
	padding: 0 auto;
}

/*--------------------------*/
/*--------- LIEUX ----------*/
/*--------------------------*/

.lieux {
	padding: 20px;
}

.lieux h1 {
	padding: 20px;
	text-align: center;
	font-family: "La Belle Aurore", sans-serif;
	color: hwb(204 6% 27%);
	font-size: 4rem;
}

.lieux h2 {
	padding: 20px;
	font-size: 2rem;
	font-family: "Sofia", sans-serif;
	color: hwb(204 6% 27%);
}

/*--------------------------*/
/*------- ACTIVITES --------*/
/*--------------------------*/

.activites {
	padding: 20px;
}

.activites h1 {
	padding: 20px;
	text-align: center;
	font-family: "La Belle Aurore", sans-serif;
	color: hwb(204 6% 27%);
	font-size: 4rem;
}

.activites h2 {
	padding: 20px;
	font-size: 2rem;
	font-family: "Sofia", sans-serif;
	color: hwb(204 6% 27%);
}

/*--------------------------*/
/*-------- CONTACT ---------*/
/*--------------------------*/

.contact h1 {
	font-size: 2rem;
	font-family: "La Belle Aurore", sans-serif;
	color: hwb(204 6% 27%);
	font-size: 4rem;
}

#deux_images {
			display: flex;
			width: 100%; /* Largeur du cadre */
			height: 87vh;
}
		
		
.element {
			width: 50%; /* Largeur du cadre */
			height: 100%;
			background-size: cover;
			background-position: center;
}
		
.element:nth-child(1) {
			background-image: url(../images/img14.jpg);
}
		
.element:nth-child(2) {
			background-image: url(../images/img73.jpg);
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
}
		
.contact {
			font-family: Arial, sans-serif;
			font-size: 2rem;
			color: rgb(105, 50, 9);
			width: 75%;
			height: 30%;
			text-align: center;
			margin: 50px;
}
		
iframe {
			width: 75%;
			height: 30%;
			margin: 50px;
}

/*--------------------------*/
/*------ PIED DE PAGE ------*/
/*--------------------------*/

.pied 	{	
	padding: 10px;
	background: linear-gradient(/*silver gray*/rgb(131, 193, 204),hwb(204 6% 27%) );
	/*background-color: black;*/
	border-top: solid 1px lightgray;	
}		

/*--------------------------*/
/*------- RESPONSIVE -------*/
/*--------------------------*/

@media only screen and (max-width: 1599px)	{
/*	.mobile { 
			display: block; 
	}*/
	#deux_images {
       		display: flex;
       		flex-direction: column;
    }
    .element {
    		width: 100%; /* Largeur du cadre */
    }

    .contact {
    	    font-size: 1.5rem;
    }


	#deux_images_tarifs {
		display: block;
	}
	.element_tarifs {
 		width: 100%; /* Largeur du cadre */
	}

	.element_tarifs p {
 		font-size: 2rem;
	}
	th, td {
		font-size: 1rem;
	}
}


@media only screen and (max-width: 1099px)	{
	#menu { 
			display: block; 
			height: 0; 
	}
	#menu.afficher {
			height: 427px; 
	}
	#menu {
			transition: height 0.5s; overflow: hidden;
			border-bottom: none; background: none; 
	}
	#menu li {
			background: linear-gradient(hwb(204 6% 27%), rgb(131, 193, 204));
	}
	#menu li a, #menu li a:visited {
			font-size: 1.1rem; line-height: 30px;
			text-align: left; padding-left: 10%; 
	}
	#menu li a:hover {	
			border-bottom: none;
	}
	#menu a.active {
			border-bottom: none;
	}
	#boutonmenu {
			display: block; line-height: 3rem;
			background: linear-gradient(silver, /*gray*/hwb(204 6% 27%));
			text-align: right; padding-right: 10%;
			font: bold 1.5rem/2.5rem Arial, sans-serif;
			color: white; text-decoration: none; 	
	}

/*--------------------------*/
/*-------- ACCUEIL ---------*/
/*--------------------------*/

	.slide {
    	height: 72vh;
	}

	.intro p {
		font-size: 2.5rem;
	}

	.accueil h1 {
		font-size: 1.5rem; 
	}
	
	.accueil h2 {
		font-size: 1.5rem;
	}
	
	.accueil h3, .accueil a, .accueil a:visited {
		font-size: 1.5rem;
	}

	.accueil a, .accueil a:visited {
		font-size: 0.8rem;
	}

/*--------------------------*/
/*--------- AGENDA ---------*/
/*--------------------------*/

	.dispo {
		margin: 6vh 4vh 14vh 4vh;
	}

/*--------------------------*/
/*--------- TARIFS ---------*/
/*--------------------------*/

  	th, td {
	   font-size: 0.7rem;
   	}

   	table {
		margin: 0px;
	}	

	th {
		padding: 0.5vh 0.5vh;
  	}

  	.element_tarifs:nth-child(1) {
		justify-content: flex-start;
	}

	.element_tarifs p {
		padding: 20px;
  	}

/*--------------------------*/
/*--------- GALERIE --------*/
/*--------------------------*/

	.galeries {
		margin: 0 30px;
	}

/*--------------------------*/
/*--------- LIEUX ----------*/
/*--------------------------*/

	.lieux h1 {
		font-size: 3rem;
	}

/*--------------------------*/
/*-------- CONTACT ---------*/
/*--------------------------*/

	.element:nth-child(1) {
		display: none;
	}

}